<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-06-30 23:00:58
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-02 23:56:17
 * @FilePath: \dance\pages\me\courseManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="manage">
    <!-- 头部 -->
    <uv-status-bar></uv-status-bar>
    <view class="manage-navbar">
      <!--自定义头部 -->
      <zy-navbar></zy-navbar>
    </view>
    <view class="manage-title">
      <uv-avatar :src="headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
      <view class="manage-title-info">
        <text class="manage-title-info-name" selectable user-select>
          {{ state.vuex_user?.teacher?.username }}
        </text>
        <text class="manage-title-info-title" selectable user-select>的舞蹈房</text>
      </view>
    </view>
    <view class="manage-button">
      <button open-type="contact" class="reset-button manage-button-cust">
        <uv-icon name="kefu1" custom-prefix="custom-icon" color="#fff" size="58rpx"></uv-icon>
      </button>
    </view>
    <view class="manage-course">
      <view v-for="item in list" :key="item.id" class="manage-course-item" @click="onClickItem(item)">
        <view><uv-icon :name="item.icon" custom-prefix="custom-icon" color="#fff" size="58rpx"></uv-icon></view>
        <view class="manage-course-item-label">{{ item.label }}</view>
      </view>
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
  <uv-modal ref="modalRef" title="提示" content="确认核销吗？" @confirm="onConfirm" showCancelButton asyncClose></uv-modal>
</template>

<script setup>
  import { ref, reactive, computed, nextTick } from 'vue';
  import { defaultImages } from '@/common/js/global.js';
  import { toastFn } from '@/common/js/fn.js';
  import store from '@/store/index.js';
  let { state, commit } = store;
  let headerpic = computed(() => {
    return state.vuex_user?.teacher?.profilePhoto || defaultImages[2];
  });
  // 点击多种item
  const onClickItem = item => {
    item.fn();
  };
  let onGoPushLesson = () => {
    uni.$uv.route({
      url: '/pages/me/pushLesson'
    });
  };
  let toastRef = ref(),
    modalRef = ref(),
    qrcodeData = ref();
  // 扫码
  const onScan = () => {
    uni.scanCode({
      success: async res => {
        try {
          qrcodeData.value = JSON.parse(res.result);
          modalRef.value.open();
        } catch (error) {
          toastFn(toastRef.value, '请扫正确的二维码');
        }
      }
    });
  };
  // 确认消息
  const onConfirm = async () => {
    modalRef.value.close();
    let { id, tId, tSerial } = qrcodeData.value;
    await uni.$uv.http.post('app/teacher/verify', {
      timetableID: Number(id),
      transactionID: Number(tId),
      transactionSerial: tSerial
    });

    toastRef.value.show({
      message: '核销成功',
      type: 'success',
      overlay: false
    });
  };
  const onGoAllLesson = () => {
    uni.$uv.route({
      url: '/pages/teacher/allLesson'
    });
  };
  const onGoAllOrder = () => {
    uni.$uv.route({
      url: '/pages/teacher/allOrder'
    });
  };
  let list = [
    // { id: 1, label: '发布课程', icon: 'fabu', fn: onGoPushLesson },
    { id: 2, label: '全部课程', icon: 'kecheng', fn: onGoAllLesson },
    { id: 3, label: '全部订单', icon: 'dingdan', fn: onGoAllOrder },
    { id: 4, label: '核销课程', icon: 'saoyisao', fn: onScan }
  ];
</script>

<style lang="scss" scoped>
  .manage {
    background-color: #1d1f24;
    height: calc(100vh - env(safe-area-inset-bottom));
    color: #fff;
    &-title {
      display: flex;
      font-size: 23rpx;
      margin-left: 37rpx;
      padding-top: $dance-navbar-top-height;
      &-info {
        flex: 1;
        margin-top: 92rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 14rpx;
        font-size: 35rpx;
        &-name {
          margin-bottom: 12rpx;
        }
        &-title {
          margin-left: 77rpx;
        }
      }
    }
    &-button {
      width: 100%;
      display: inline-flex;
      justify-content: flex-end;
      margin-top: 73rpx;
      margin-bottom: 47rpx;
      &-cust {
        margin-right: 91rpx;
      }
    }
    &-course {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      &-item {
        font-size: 28rpx;
        width: 33.333%;
        height: 171rpx;
        flex-direction: column;
        display: flex;
        align-items: center;
        margin-bottom: 17rpx;
        justify-content: center;
        &-label {
          margin-top: 17rpx;
        }
      }
    }
  }
</style>
